<template>
  <div>
    <el-dialog :title="$store.state.adminStore.title"
               :visible.sync="$store.state.adminStore.dialogVisible"
               width="30%">
      <div class="safe_form">
        <el-form>
          <el-form-item label="用户名：">
            <el-input v-model="userName"> </el-input>
          </el-form-item>
          <el-form-item label="姓名：">
            <el-input v-model="truename"></el-input>
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input v-model="phone"></el-input>
          </el-form-item>
          <el-form-item label="权限：">
            <el-select placeholder="选择权限"
                       v-model="power">
              <el-option label="系统管理员"
                         value="系统管理员"></el-option>
              <el-option label="课程管理员"
                         value="课程管理员"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="sureAdd">{{$store.state.adminStore.btnTxt}}</el-button>
        <el-button @click="changeDialogVisble(false)">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import { addAdminApi, editAdminApi } from '../../api/admin'
import { mapActions, mapMutations, mapState } from 'vuex';
export default {
  data () {
    return {
      userName: "",
      truename: "",
      phone: "",
      power: ""
    }
  },
  beforeCreate () {

  },
  computed: {
    ...mapState("adminStore", ["eidtRow"])
  },
  watch: {
    eidtRow (newVal) { //监听修改的当前行数据的变化  
      if (newVal) {
        this.userName = newVal.userName;
        this.phone = newVal.phone;
        this.power = newVal.power;
        this.truename = newVal.turename;
      } else {
        this.userName = "";
        this.phone = "";
        this.power = "";
        this.truename = "";
      }
    }
  },
  methods: {
    ...mapMutations("adminStore", ["changeDialogVisble", "changeEidtRow"]),
    ...mapActions("adminStore", ["getAdminAction"]),
    async sureAdd () {//确认添加和确认修改
      var obj = {
        userName: this.userName,
        turename: this.truename,
        phone: this.phone,
        power: this.power
      }
      if (this.$store.state.adminStore.eidtId) {  //假如 vuex中有修改id 
        //修改
        obj.tokenId = this.$store.state.adminStore.eidtId;//修改需要的id
        obj.password = ""
        var editRes = await editAdminApi(obj)
        console.log(editRes)
        if (editRes.success) {
          this.$alert("修改成功")
        }
      } else {
        // 添加
        obj.password = "123456"
        var addRes = await addAdminApi(obj)
        console.log(addRes)
        if (addRes.success) {
          this.$alert("添加成功")
        }
      }
      // 添加成功和修改成功
      this.userName = ""
      this.truename = ""
      this.phone = ""
      this.power = ""
      this.getAdminAction({ pageStart: this.$store.state.adminStore.pageStart })
      this.changeDialogVisble(false)//关闭弹出层
      this.changeEidtRow(null)//清空修改的当前行数据
    }
  }
}
</script>
<style lang="less">
</style>